<template>
    <div class="house-content table-box">
        <ProTable ref="proTable" :requestApi="api.getList" :columns="columns"
            @dblclick="onDblclick" :height="260">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="onAddPerson">新增</el-button>
                <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.ids)">
                    批量删除
                </el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="EditPen" @click="openOptionDialog(scope.row)">编辑</el-button>
                <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button>
            </template>
        </ProTable>
        <AddPerson ref="addPersonRef" />
    </div>
</template>

<script setup lang="tsx" name="personList">

import { ref, reactive, onMounted } from "vue";
import { CirclePlus, Delete, EditPen, Discount } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
import { useHandleData } from "/@/hooks/useHandleData";
import { ElMessage } from 'element-plus';
import * as api from "/@/api/person/personInfo";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";
import AddPerson from "/@/components/AddPerson/index.vue";

const router = useRouter();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref(), addPersonRef = ref();

// 获取表头信息
const columns = columnsFunction();

const batchDelete = async (ids: string[]) => {
    await useHandleData(api.remove, { ids }, "删除所选人员信息");
    proTable.value.refresh();
};

const onDblclick = (row: any, column: any, event: any) => {
    router.push('/person/edit/' + row.id + '/' + `${row.xm}-人口信息`);
}

const onAddPerson = () => {
    let params = {
        title: '新增人口信息',
        rowData: {dataStatus: 1},
        isView: false,
        apiUrl: api.add,
        getTableList: proTable.value.refresh
    };
    addPersonRef.value!.acceptParams(params);
}

/**
 * 更新，编辑都调这里
 * @param params 
 */
const acceptParams = async (params: any) => {
    if (!params.id) {
        ElMessage.error('获取地址树信息失败');
        return;
    }
    proTable.value.refresh();
}

// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { id: params.id }, `删除【${params.xm}】`);
    proTable.value.refresh();
};

const openOptionDialog = (rowData: any) => {
    router.push('/person/details/' + rowData.id + '/' + `${rowData.name}-人口信息`);
};
defineExpose({
    acceptParams,
});

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 12px;
}

:deep(.el-card__header) {
    padding: 10px 18px;
}

.house-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
</style>